<template>
  <div>
    <h1>ref 函数</h1>
    <hr>
    <ul>
      <li>{{ count }}---{{ name }}</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <hr>
    <ul>
      <li v-for="item in list" :key="item.id">任务名：{{ item.task }}--是否完成：{{ item.done?'完成':'未完成' }}</li>
    </ul>
  </div>
</template>
<!-- 使用 ts开发，script标签必须指定 lang="ts" -->
<script setup lang="ts">
import {ref} from 'vue'
/**
 * !特别说明：学习 ts 和 vue配合使用，== 主要学 ts 怎么给 vue 里边的变量定义类型 ==
 */
// 1. ref 是一个泛型函数
// 简单类型（不需要传参，指定变量类型=>使用类型推断）
const count = ref<number>(0)
// count.value = ''
const name = ref('张三')
// 复杂类型（一般需要传参，指定变量类型）
type List = {
  id:number
  task:string
  done:boolean
}[]

const list = ref<List>([])
// 模拟异步请求
setTimeout(() => {
  list.value = [
    {
      id: 1,
      task: '吃饭',
      done: true
    },
    {
      id: 2,
      task: '睡觉',
      done: false
    },
    {
      id: 3,
      task: '打豆豆',
      done: true
    }
  ]
}, 2000);
</script>

<style scoped>

</style>